<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
  <title>Bootstrap Components &rsaquo; Tab &mdash; Stisla</title>

  <!-- General CSS Files -->
  <link rel="stylesheet" href="../assets/modules/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="../assets/modules/fontawesome/css/all.min.css">

  <!-- CSS Libraries -->

  <!-- Template CSS -->
  <link rel="stylesheet" href="../assets/css/style.css">
  <link rel="stylesheet" href="../assets/css/components.css">
  <link rel="stylesheet" href="../assets/css/rtl.css">
</head>

<body>
  <div id="app">
    <div class="main-wrapper main-wrapper-1">
      <div class="navbar-bg"></div>
      <nav class="navbar navbar-expand-lg main-navbar">
        <form class="form-inline ml-auto">
          <ul class="navbar-nav ml-3">
            <li><a href="#" data-toggle="sidebar" class="nav-link nav-link-lg"><i class="fas fa-bars"></i></a></li>
            <li><a href="#" data-toggle="search" class="nav-link nav-link-lg d-sm-none"><i class="fas fa-search"></i></a></li>
          </ul>
          <div class="search-element text-right">
            <input class="form-control" type="search" placeholder="جستجو" aria-label="Search" data-width="250">
            <button class="btn" type="submit"><i class="fas fa-search"></i></button>
            <div class="search-backdrop"></div>
            <div class="search-result">
              <div class="search-header">
                نتیجه جستجو
              </div>
              <div class="search-item">
                <a href="#">چگونه ناسا رو هک کنیم؟</a>
                <a href="#" class="search-close"><i class="fas fa-times"></i></a>
              </div>
              <div class="search-item">
                <a href="#">Kodinger.com</a>
                <a href="#" class="search-close"><i class="fas fa-times"></i></a>
              </div>
              <div class="search-item">
                <a href="#">پنل مدیریت</a>
                <a href="#" class="search-close"><i class="fas fa-times"></i></a>
              </div>
              <div class="search-header">
                نتایج
              </div>
              <div class="search-item">
                <a href="#">
                  <img class="ml-3 rounded" width="30" src="../assets/img/products/product-3-50.png" alt="product">
                  آیفون s9 تولید شد
                </a>
              </div>
              <div class="search-item">
                <a href="#">
                  <img class="ml-3 rounded" width="30" src="../assets/img/products/product-2-50.png" alt="product">
                  چه شادی هایی که زیر پای انسانها سرکوب شدند
                </a>
              </div>
              <div class="search-item">
                <a href="#">
                  <img class="ml-3 rounded" width="30" src="../assets/img/products/product-1-50.png" alt="product">
                  لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.
                </a>
              </div>
              <div class="search-header">
                پروژه ها
              </div>
              <div class="search-item">
                <a href="#">
                  <div class="search-icon bg-danger text-white ml-3">
                    <i class="fas fa-code"></i>
                  </div>
                  متریال ادمین پنل
                </a>
              </div>
              <div class="search-item">
                <a href="#">
                  <div class="search-icon bg-primary text-white ml-3">
                    <i class="fas fa-laptop"></i>
                  </div>
                  ایجاد صفحه لندینگ
                </a>
              </div>
            </div>
          </div>
        </form>
        <ul class="navbar-nav navbar-right">
          <li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link nav-link-lg message-toggle beep"><i class="far fa-envelope"></i></a>
            <div class="dropdown-menu dropdown-list text-right dropdown-menu-left">
              <div class="dropdown-header">پیام ها
                <div class="float-left">
                  <a href="#">علامتگذاری همه بصورت خوانده شده</a>
                </div>
              </div>
              <div class="dropdown-list-content dropdown-list-message">
                <a href="#" class="dropdown-item dropdown-item-unread">
                  <div class="dropdown-item-avatar">
                    <img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle">
                    <div class="is-online"></div>
                  </div>
                  <div class="dropdown-item-desc text-right">
                    <b>مهدی خانزادی</b>
                    <p>سلام داداچ!</p>
                    <div class="time">۱۰ ساعت پیش</div>
                  </div>
                </a>
                <a href="#" class="dropdown-item dropdown-item-unread">
                  <div class="dropdown-item-avatar">
                    <img alt="image" src="../assets/img/avatar/avatar-2.png" class="rounded-circle">
                  </div>
                  <div class="dropdown-item-desc">
                    <b>مهیار انصاری</b>
                    <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
                    <div class="time">۱۲ ساعت پیش</div>
                  </div>
                </a>
                <a href="#" class="dropdown-item dropdown-item-unread">
                  <div class="dropdown-item-avatar">
                    <img alt="image" src="../assets/img/avatar/avatar-3.png" class="rounded-circle">
                    <div class="is-online"></div>
                  </div>
                  <div class="dropdown-item-desc">
                    <b>آمیتا پاچان</b>
                    <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
                    <div class="time">۱۲ ساعت پیش</div>
                  </div>
                </a>
                <a href="#" class="dropdown-item">
                  <div class="dropdown-item-avatar">
                    <img alt="image" src="../assets/img/avatar/avatar-4.png" class="rounded-circle">
                  </div>
                  <div class="dropdown-item-desc">
                    <b>مهدی خانزادی</b>
                    <p>سلام سیستم پشتیبانی پاترونیک رو استفاده کنید</p>
                    <div class="time">۱۶ ساعت پیش</div>
                  </div>
                </a>
                <a href="#" class="dropdown-item">
                  <div class="dropdown-item-avatar">
                    <img alt="image" src="../assets/img/avatar/avatar-5.png" class="rounded-circle">
                  </div>
                  <div class="dropdown-item-desc">
                    <b>لورم ایپسوم</b>
                    <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
                    <div class="time">دیروز</div>
                  </div>
                </a>
              </div>
              <div class="dropdown-footer text-center">
                <a href="#"> دیدن همه پیام ها<i class="fas fa-chevron-left"></i></a>
              </div>
            </div>
          </li>
          <li class="dropdown dropdown-list-toggle"><a href="#" data-toggle="dropdown" class="nav-link notification-toggle nav-link-lg beep"><i class="far fa-bell"></i></a>
            <div class="dropdown-menu dropdown-list dropdown-menu-left">
              <div class="dropdown-header text-right">نوتیفیکیشن ها
                <div class="float-left">
                  <a href="#"> علامتگذاری همه بصورت خوانده شده</a>
                </div>
              </div>
              <div class="dropdown-list-content dropdown-list-icons text-right">
                <a href="#" class="dropdown-item dropdown-item-unread">
                  <div class="dropdown-item-icon bg-primary text-white">
                    <i class="fas fa-code"></i>
                  </div>
                  <div class="dropdown-item-desc">
                    قالب مدیریتی متریال اپدیت جدید داد!
                    <div class="time text-primary">۲ دقیقه پیش</div>
                  </div>
                </a>
                <a href="#" class="dropdown-item">
                  <div class="dropdown-item-icon bg-info text-white">
                    <i class="far fa-user"></i>
                  </div>
                  <div class="dropdown-item-desc">
                    <b>شما</b> و <b>مهیار انصاری</b> هم اکنون همکار هستید.
                    <div class="time">۱۰ ساعت پیش</div>
                  </div>
                </a>
                <a href="#" class="dropdown-item">
                  <div class="dropdown-item-icon bg-success text-white">
                    <i class="fas fa-check"></i>
                  </div>
                  <div class="dropdown-item-desc">
                    <b>مهدی خانزادی</b> اطلاعات مرتبط با <b>قالب</b> را <b>آپلود کرد.</b>
                    <div class="time">۱۲ ساعت پیش</div>
                  </div>
                </a>
                <a href="#" class="dropdown-item">
                  <div class="dropdown-item-icon bg-danger text-white">
                    <i class="fas fa-exclamation-triangle"></i>
                  </div>
                  <div class="dropdown-item-desc">
                    فضای هارد دیسک پر شده است لطفا آن را خالی کنید.
                    <div class="time">۱۷ ساعت پیش</div>
                  </div>
                </a>
                <a href="#" class="dropdown-item">
                  <div class="dropdown-item-icon bg-info text-white">
                    <i class="fas fa-bell"></i>
                  </div>
                  <div class="dropdown-item-desc">
                    به قالب متریال خوش آمدید
                    <div class="time">دیروز</div>
                  </div>
                </a>
              </div>
              <div class="dropdown-footer text-center">
                <a href="#">
                  <span>نمایش همه</span>
                  <i class="fas fa-chevron-left"></i>
                </a>
              </div>
            </div>
          </li>
          <li class="dropdown"><a href="#" data-toggle="dropdown" class="nav-link dropdown-toggle nav-link-lg nav-link-user">
            <img alt="image" src="../assets/img/avatar/avatar-1.png" class="rounded-circle mr-1">
            <div class="d-sm-none d-lg-inline-block">سلام مهدی</div></a>
            <div class="dropdown-menu dropdown-menu-right text-right">
              <div class="dropdown-title text-center">۵ دقیقه پیش لاگین کردین</div>
              <a href="features-profile.html" class="dropdown-item has-icon">
                <span>پروفایل</span>
                <i class="far fa-user"></i>
              </a>
              <a href="features-activities.html" class="dropdown-item has-icon">
                <span>فعالیت ها</span>
                <i class="fas fa-bolt"></i>
              </a>
              <a href="features-settings.html" class="dropdown-item has-icon">
                <span>تنظیمات</span>
                <i class="fas fa-cog"></i>
              </a>
              <div class="dropdown-divider"></div>
              <a href="#" class="dropdown-item has-icon text-danger">
                <span>خروج</span>
                <i class="fas fa-sign-out-alt"></i>
              </a>
            </div>
          </li>
        </ul>
      </nav>
      <div class="main-sidebar sidebar-style-2">
        <aside id="sidebar-wrapper">
          <div class="sidebar-brand">
            <a href="index.html">مدیریت پاترونیک</a>
          </div>
          <div class="sidebar-brand sidebar-brand-sm">
            <a href="index.html">مدیریت فروش</a>
          </div>
          <ul class="sidebar-menu">
            <li class="menu-header">داشبورد</li>
            <li class="dropdown active">
              <a href="#" class="nav-link has-dropdown"><i class="fas fa-fire"></i><span>داشبورد</span></a>
              <ul class="dropdown-menu">
                <li class=active><a class="nav-link" href="index-0.html">داشبورد عمومی</a></li>
                <li><a class="nav-link" href="index.html">داشبورد فروش محصولات</a></li>
              </ul>
            </li>
            <li class="menu-header">امکانات بیشتر</li>
            <li class="dropdown">
              <a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-columns"></i> <span>صفحه بندی</span></a>
              <ul class="dropdown-menu">
                <li><a class="nav-link" href="layout-default.html">حالت پیش فرض</a></li>
                <li><a class="nav-link" href="layout-transparent.html">سایدبار بدون رنگ</a></li>
                <li><a class="nav-link" href="layout-top-navigation.html">نویگیشن بالا</a></li>
              </ul>
            </li>
            <li><a class="nav-link" href="blank.html"><i class="far fa-square"></i> <span>صفحه خالی</span></a></li>
            <li class="dropdown">
              <a href="#" class="nav-link has-dropdown"><i class="fas fa-th"></i> <span>بوت استرپ</span></a>
              <ul class="dropdown-menu">
                <li><a class="nav-link" href="bootstrap-alert.html">آلرت</a></li>
                <li><a class="nav-link" href="bootstrap-badge.html">بدج</a></li>
                <li><a class="nav-link" href="bootstrap-breadcrumb.html">بردکرامپ</a></li>
                <li><a class="nav-link" href="bootstrap-buttons.html">دکمه ها</a></li>
                <li><a class="nav-link" href="bootstrap-card.html">کارت</a></li>
                <li><a class="nav-link" href="bootstrap-carousel.html">کروسل</a></li>
                <li><a class="nav-link" href="bootstrap-collapse.html">کولاپس</a></li>
                <li><a class="nav-link" href="bootstrap-dropdown.html">دراپ دون</a></li>
                <li><a class="nav-link" href="bootstrap-form.html">فرم</a></li>
                <li><a class="nav-link" href="bootstrap-list-group.html">لیست گروه</a></li>
                <li><a class="nav-link" href="bootstrap-media-object.html">مدیا ابجکت</a></li>
                <li><a class="nav-link" href="bootstrap-modal.html">مودال</a></li>
                <li><a class="nav-link" href="bootstrap-nav.html">نویگیشن</a></li>
                <li><a class="nav-link" href="bootstrap-navbar.html">نوبار</a></li>
                <li><a class="nav-link" href="bootstrap-pagination.html">پجینیشن</a></li>
                <li><a class="nav-link" href="bootstrap-popover.html">پاپ اور</a></li>
                <li><a class="nav-link" href="bootstrap-progress.html">پراگرس</a></li>
                <li><a class="nav-link" href="bootstrap-table.html">جدول</a></li>
                <li><a class="nav-link" href="bootstrap-tooltip.html">تولتیپ</a></li>
                <li><a class="nav-link" href="bootstrap-typography.html">تایپوگرافی</a></li>
              </ul>
            </li>
            <li class="menu-header">امکانات دیگر</li>
            <li class="dropdown">
              <a href="#" class="nav-link has-dropdown"><i class="fas fa-th-large"></i> <span>کامپوننت ها</span></a>
              <ul class="dropdown-menu">
                <li><a class="nav-link" href="components-gallery.html">گالری</a></li>
                <li><a class="nav-link" href="components-multiple-upload.html">مولتی آپلود</a></li>
                <li><a class="nav-link" href="components-tab.html">تب</a></li>
                <li><a class="nav-link" href="components-table.html">جدول</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="nav-link has-dropdown"><i class="far fa-file-alt"></i> <span>فرم ها</span></a>
              <ul class="dropdown-menu">
                <li><a class="nav-link" href="forms-advanced-form.html">فرم پیشرفته</a></li>
                <li><a class="nav-link" href="forms-editor.html">ویرایشگر</a></li>
                <li><a class="nav-link" href="forms-validation.html">ولیدیشن</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="nav-link has-dropdown"><i class="fas fa-plug"></i> <span>ماژول ها</span></a>
              <ul class="dropdown-menu">
                <li><a class="nav-link" href="modules-calendar.html">تقویم</a></li>
                <li><a class="nav-link" href="modules-chartjs.html">چارت ها</a></li>
                <li><a class="nav-link" href="modules-datatables.html">دیتاتیبل</a></li>
                <li><a class="nav-link" href="modules-flag.html">پرچم</a></li>
                <li><a class="nav-link" href="modules-font-awesome.html">فونت اوسوم</a></li>
                <li><a class="nav-link" href="modules-ion-icons.html">ای او ن ایکون</a></li>
                <li><a class="nav-link" href="modules-owl-carousel.html">اول کراسول</a></li>
                <li><a class="nav-link" href="modules-sparkline.html">اسپارک لاین</a></li>
                <li><a class="nav-link" href="modules-sweet-alert.html">سویت الرت</a></li>
                <li><a class="nav-link" href="modules-toastr.html">توستر</a></li>
                <li><a class="nav-link" href="modules-vector-map.html">وکتور مپ</a></li>
                <li><a class="nav-link" href="modules-weather-icon.html">ایکن اب و هوا</a></li>
              </ul>
            </li>
            <li class="menu-header">صفحات</li>
            <li class="dropdown">
              <a href="#" class="nav-link has-dropdown"><i class="far fa-user"></i> <span>ثبت نام</span></a>
              <ul class="dropdown-menu">
                <li><a href="auth-forgot-password.html">فراموشی کلمه عبور</a></li>
                <li><a href="auth-login.html">لاگین</a></li>
                <li><a href="auth-register.html">ثبت نام</a></li>
                <li><a href="auth-reset-password.html">بازیابی کلمه عبور</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="nav-link has-dropdown"><i class="fas fa-exclamation"></i> <span>خطاها</span></a>
              <ul class="dropdown-menu">
                <li><a class="nav-link" href="errors-503.html">503</a></li>
                <li><a class="nav-link" href="errors-403.html">403</a></li>
                <li><a class="nav-link" href="errors-404.html">404</a></li>
                <li><a class="nav-link" href="errors-500.html">500</a></li>
              </ul>
            </li>
            <li><a class="nav-link" href="credits.html"><i class="fas fa-pencil-ruler"></i> <span>سازنده ها</span></a></li>
          </ul>

          <div class="mt-4 mb-4 p-3 hide-sidebar-mini">
              <a href="https://getstisla.com/docs" class="btn btn-primary btn-lg btn-block btn-icon-split">
              <i class="fas fa-rocket"></i> مستندات قالب
            </a>
          </div>
        </aside>
      </div>

      <!-- Main Content -->
      <div class="main-content">
        <section class="section">
          <div class="section-header">
            <h1>تب</h1>
            <div class="section-header-breadcrumb">
              <div class="breadcrumb-item active"><a href="#">داشبورد</a></div>
              <div class="breadcrumb-item"><a href="#">کامپوننت بوت استرپ</a></div>
              <div class="breadcrumb-item">تب</div>
            </div>
          </div>

          <div class="section-body text-right">
            <h2 class="section-title">تب</h2>
            <p class="section-lead">با استفاده از تب میتوانید بین داده های مختلف جابه جا بشید.</p>

            <div class="row">
              <div class="col-12 col-sm-6 col-lg-6">
                <div class="card">
                  <div class="card-header">
                    <h4>تب پیشفرض</h4>
                  </div>
                  <div class="card-body">
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                      <li class="nav-item">
                        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">خانه</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">پروفایل</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">تماس با ما</a>
                      </li>
                    </ul>
                    <div class="tab-content" id="myTabContent">
                      <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
                        و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه
                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
                        و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه
                        مجله در ستون و سطر آنچنان که لازم است و برای شرایط فعلی
                        تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای.
                        مجله در ستون و سطر آنچنان که لازم است و برای شرایط فعلی
                        تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای.
                      </div>
                      <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
                        و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه
                        مجله در ستون و سطر آنچنان که لازم است و برای شرایط فعلی
                        تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای.
                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
                      </div>
                      <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
                        تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای.
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-12 col-sm-6 col-lg-6">
                <div class="card">
                  <div class="card-header">
                    <h4>تب همراه بوردر</h4>
                  </div>
                  <div class="card-body">
                    <ul class="nav nav-tabs" id="myTab2" role="tablist">
                      <li class="nav-item">
                        <a class="nav-link active" id="home-tab2" data-toggle="tab" href="#home2" role="tab" aria-controls="home" aria-selected="true">خانه</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" id="profile-tab2" data-toggle="tab" href="#profile2" role="tab" aria-controls="profile" aria-selected="false">پروفایل</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" id="contact-tab2" data-toggle="tab" href="#contact2" role="tab" aria-controls="contact" aria-selected="false">تماس با ما</a>
                      </li>
                    </ul>
                    <div class="tab-content tab-bordered" id="myTab3Content">
                      <div class="tab-pane fade show active" id="home2" role="tabpanel" aria-labelledby="home-tab2">
                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
                        و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه
                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
                        و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه
                        مجله در ستون و سطر آنچنان که لازم است و برای شرایط فعلی
                        تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای.
                        مجله در ستون و سطر آنچنان که لازم است و برای شرایط فعلی
                        تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای.
                      </div>
                      <div class="tab-pane fade" id="profile2" role="tabpanel" aria-labelledby="profile-tab2">
                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
                        و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه
                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
                        مجله در ستون و سطر آنچنان که لازم است و برای شرایط فعلی
                        تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای.
                      </div>
                      <div class="tab-pane fade" id="contact2" role="tabpanel" aria-labelledby="contact-tab2">
                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
                        و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه
                        لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-12 col-sm-5 col-lg-5">
                <div class="card">
                  <div class="card-header">
                    <h4>Tab <code>.nav-pills</code></h4>
                  </div>
                  <div class="card-body">
                    <ul class="nav nav-pills" id="myTab3" role="tablist">
                      <li class="nav-item">
                        <a class="nav-link active" id="home-tab3" data-toggle="tab" href="#home3" role="tab" aria-controls="home" aria-selected="true">Home</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" id="profile-tab3" data-toggle="tab" href="#profile3" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" id="contact-tab3" data-toggle="tab" href="#contact3" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
                      </li>
                    </ul>
                    <div class="tab-content" id="myTabContent2">
                      <div class="tab-pane fade show active" id="home3" role="tabpanel" aria-labelledby="home-tab3">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                        cillum dolore eu fugiat nulla pariatur.
                      </div>
                      <div class="tab-pane fade" id="profile3" role="tabpanel" aria-labelledby="profile-tab3">
                        Sed sed metus vel lacus hendrerit tempus. Sed efficitur velit tortor, ac efficitur est lobortis quis. Nullam lacinia metus erat, sed fermentum justo rutrum ultrices. Proin quis iaculis tellus. Etiam ac vehicula eros, pharetra consectetur dui.
                      </div>
                      <div class="tab-pane fade" id="contact3" role="tabpanel" aria-labelledby="contact-tab3">
                        Vestibulum imperdiet odio sed neque ultricies, ut dapibus mi maximus. Proin ligula massa, gravida in lacinia efficitur, hendrerit eget mauris. Pellentesque fermentum, sem interdum molestie finibus, nulla diam varius leo, nec varius lectus elit id dolor.
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-12 col-sm-7 col-lg-7">
                <div class="card">
                  <div class="card-header">
                    <h4>2 Column</h4>
                  </div>
                  <div class="card-body">
                    <div class="row">
                      <div class="col-12 col-sm-12 col-md-4">
                        <ul class="nav nav-pills flex-column" id="myTab4" role="tablist">
                          <li class="nav-item">
                            <a class="nav-link active" id="home-tab4" data-toggle="tab" href="#home4" role="tab" aria-controls="home" aria-selected="true">Home</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" id="profile-tab4" data-toggle="tab" href="#profile4" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" id="contact-tab4" data-toggle="tab" href="#contact4" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
                          </li>
                        </ul>
                      </div>
                      <div class="col-12 col-sm-12 col-md-8">
                        <div class="tab-content no-padding" id="myTab2Content">
                          <div class="tab-pane fade show active" id="home4" role="tabpanel" aria-labelledby="home-tab4">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                          </div>
                          <div class="tab-pane fade" id="profile4" role="tabpanel" aria-labelledby="profile-tab4">
                            Sed sed metus vel lacus hendrerit tempus. Sed efficitur velit tortor, ac efficitur est lobortis quis. Nullam lacinia metus erat, sed fermentum justo rutrum ultrices. Proin quis iaculis tellus. Etiam ac vehicula eros, pharetra consectetur dui. Aliquam convallis neque eget tellus efficitur, eget maximus massa imperdiet. Morbi a mattis velit. Donec hendrerit venenatis justo, eget scelerisque tellus pharetra a.
                          </div>
                          <div class="tab-pane fade" id="contact4" role="tabpanel" aria-labelledby="contact-tab4">
                            Vestibulum imperdiet odio sed neque ultricies, ut dapibus mi maximus. Proin ligula massa, gravida in lacinia efficitur, hendrerit eget mauris. Pellentesque fermentum, sem interdum molestie finibus, nulla diam varius leo, nec varius lectus elit id dolor. Nam malesuada orci non ornare vulputate. Ut ut sollicitudin magna. Vestibulum eget ligula ut ipsum venenatis ultrices. Proin bibendum bibendum augue ut luctus.
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
      <footer class="main-footer">
        <div class="footer-left">
          Copyright &copy; 2018 <div class="bullet"></div> Design By <a href="https://nauval.in/">Muhamad Nauval Azhar</a>
        </div>
        <div class="footer-right">

        </div>
      </footer>
    </div>
  </div>

  <!-- General JS Scripts -->
  <script src="../assets/modules/jquery.min.js"></script>
  <script src="../assets/modules/popper.js"></script>
  <script src="../assets/modules/tooltip.js"></script>
  <script src="../assets/modules/bootstrap/js/bootstrap.min.js"></script>
  <script src="../assets/modules/nicescroll/jquery.nicescroll.min.js"></script>
  <script src="../assets/modules/moment.min.js"></script>
  <script src="../assets/js/stisla.js"></script>
  
  <!-- JS Libraies -->

  <!-- Page Specific JS File -->
  
  <!-- Template JS File -->
  <script src="../assets/js/scripts.js"></script>
  <script src="../assets/js/custom.js"></script>
</body>
</html>
